<template>
<div class="article-preview">
    <div class="article-meta">
        <nuxt-link :to="{name: 'profile', params: {username: article.author.username} }"><img :src="article.author.image" /></nuxt-link>
        <div class="info">
        <nuxt-link :to="{name: 'profile', params: {username: article.author.username} }" class="author">{{ article.author.username }}</nuxt-link>
        <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
        </div>
        <button 
            class="btn btn-outline-primary btn-sm pull-xs-right"
            :class="{active: article.favorited}"
            @click="onFavorite(article)"
            :disabled="article.favoriteDisable"
        >
        <i class="ion-heart"></i> {{ article.favoritesCount }}
        </button>
    </div>
    <nuxt-link :to="{name: 'article', params: { slug: article.slug }}" class="preview-link">
        <h1>{{article.title}}</h1>
        <p>{{article.description}}</p>
        <span>Read more...</span>
        <ul class="tag-list">
            <li 
                class="tag-default tag-pill tag-outline"
                v-for="tag in article.tagList"
                :key="tag"
            >{{tag}}</li>
        </ul>
    </nuxt-link>
</div>
</template>

<script>
import { addFavorite, deleteFavorite } from '@/api/article'

export default {
    name: 'ArticlePreview',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data() {
        return {

        }
    },
    methods: {
        async onFavorite(article) {
            article.favoriteDisable = true
            if (article.favorited) {
                // 取消点赞
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
            } else {
                // 添加点赞
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
            }
            article.favoriteDisable = false
        }
    }
}
</script>

<style>

</style>